Day29 Javascript web API

2022 iThome 鐵人賽

DAY 29

Modern Web

Javascripts惡補小教室系列第 29 篇

14th鐵人賽

karta1366796

團隊imac_柬埔寨7日遊

2022-10-14 23:30:14

535 瀏覽

分享至

API是甚麼?

這篇我們要介紹web API，前一篇我們提到了API接口，那API又是甚麼呢? 全名為API(Application Program Interface)，意思是應用程式的接口，就是一個橋梁的概念，用來銜接軟體與軟體之間，而透過web API我們就可以銜接第三方軟體，獲取JSON格式的資料。也可以發送HTTP請求。

Web API最大功能:

擴展網站的功能。
將複雜的功能極簡化。
將複雜的程式碼提供簡單的語法。

那前面講了那麼多，是不是有點抽象呢?譬如說我們今天想要在網站上擁有Google Map的地圖資訊，我們就可以透過去Google的網站查詢API，套用在自己的網頁上，或是中央氣象局的天氣資訊，都可以透過API讓自己的網站更加生動化。

瀏覽器API

瀏覽器內有內建的web API來讓我們執行操作，舉個經緯度的實際例子操作。

<!DOCTYPE html>
<html>
<body>

<p>按下按鈕取得位置</p>

<button onclick="getLocation()">點擊</button>

<p id="demo"></p>

<script>
const x = document.getElementById("demo");

function getLocation() {
  try {
    navigator.geolocation.getCurrentPosition(showPosition);
  } catch {
    x.innerHTML = err;
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

當按下按鈕時，取得經緯度的位置。而其實還有許多的第三方API供我們去做選擇。
像是youtube API，能夠在網頁上顯示影片，Facebook API，在網頁上顯示Facebook訊息，這些API都是公開的Web API依造不同的需求可以去使用。

那我們今天的教學就到這了!謝謝大家，明天最後一天讓我們一起努力吧。